/*
 * @Author: chengsl
 * @Date: 2023-01-09 15:20:03
 * @LastEditors: chengsl
 * @LastEditTime: 2023-01-09 15:21:47
 * @Description: 双向条形图 widgetBarCompareChart
 */
import * as echarts from 'echarts'
export default {
  title: {
    text: '',
    show: true,
    left: 'center',
    textStyle: { color: '#FFD700', fontSize: 20, fontWeight: 'normal' }
  },
  grid: [
    {
      show: false,
      left: '6%',
      top: 20,
      bottom: 5,
      containLabel: true,
      width: '35%'
    },
    { show: false, left: '51%', top: 20, bottom: 20, width: 0 },
    {
      show: false,
      right: '6%',
      top: 20,
      bottom: 5,
      containLabel: true,
      width: '35%'
    }
  ],
  legend: {
    top: 'top',
    left: 'right',
    show: true,
    type: 'plain',
    orient: 'horizontal',
    selectedMode: false,
    textStyle: { color: '#A9B2BC', fontSize: 12 },
    itemWidth: 12,
    itemHeight: 12,
    bottom: 'top',
    data: ['男', '女']
  },
  xAxis: [
    {
      splitNumber: 2,
      type: 'value',
      show: true,
      inverse: true,
      axisLine: {
        show: false,
        lineStyle: { color: 'rgba(32,45,92,0.5)', width: 2 }
      },
      splitArea: {
        show: true,
        areaStyle: { color: ['rgba(32,45,92,0.1)', 'rgba(32,45,92,0.4)'] }
      },
      axisTick: { show: false, inside: false, alignWithLabel: true },
      position: 'bottom',
      axisLabel: {
        show: true,
        margin: 15,
        rotate: 0,
        textStyle: { color: '#A9B2BC', fontSize: 14 }
      },
      splitLine: {
        show: false,
        lineStyle: { color: 'rgba(32,45,92,0.5)', width: 2, type: 'solid' }
      }
    },
    { gridIndex: 1, show: false },
    {
      gridIndex: 2,
      splitNumber: 2,
      show: true,
      type: 'value',
      axisLine: {
        show: false,
        lineStyle: { color: 'rgba(32,45,92,0.5)', width: 2 }
      },
      splitArea: {
        show: true,
        areaStyle: { color: ['rgba(32,45,92,0.1)', 'rgba(32,45,92,0.4)'] }
      },
      axisTick: { show: false, inside: false, alignWithLabel: true },
      position: 'bottom',
      axisLabel: {
        show: true,
        margin: 15,
        rotate: 0,
        textStyle: { color: '#A9B2BC', fontSize: 14 }
      },
      splitLine: {
        show: false,
        lineStyle: { color: 'rgba(32,45,92,0.5)', width: 2, type: 'solid' }
      }
    }
  ],
  yAxis: [
    {
      name: ' ',
      type: 'category',
      position: 'right',
      axisLine: { show: false },
      axisTick: { show: false },
      axisLabel: { show: false },
      data: [
        '0~10岁',
        '10~20岁',
        '20~30岁',
        '30~40岁',
        '40~50岁',
        '50~60岁',
        '60~70岁',
        '70~80岁',
        '80~90岁',
        '90岁以上'
      ]
    },
    {
      gridIndex: 1,
      type: 'category',
      position: 'left',
      axisLine: { show: false, lineStyle: { color: '#fff' } },
      axisTick: { show: false },
      axisLabel: {
        show: true,
        textStyle: { align: 'center', color: '#A9B2BC', fontSize: 14 }
      },
      data: [
        '0~10岁',
        '10~20岁',
        '20~30岁',
        '30~40岁',
        '40~50岁',
        '50~60岁',
        '60~70岁',
        '70~80岁',
        '80~90岁',
        '90岁以上'
      ]
    },
    {
      gridIndex: 2,
      type: 'category',
      position: 'left',
      axisLine: { show: false },
      axisTick: { show: false },
      axisLabel: { show: false },
      data: [
        '0~10岁',
        '10~20岁',
        '20~30岁',
        '30~40岁',
        '40~50岁',
        '50~60岁',
        '60~70岁',
        '70~80岁',
        '80~90岁',
        '90岁以上'
      ]
    }
  ],
  series: [
    {
      name: '男',
      type: 'bar',
      barGap: 20,
      barWidth: 25,
      label: {
        normal: {
          show: false,
          position: 'outside',
          textStyle: { fontSize: 14, color: '#fff', fontWeight: 'normal' }
        },
        emphasis: { show: false }
      },
      itemStyle: {
        normal: {
          color: {
            colorStops: [
              { offset: 0, color: '#0060FF' },
              { offset: 1, color: '#0090ff' }
            ],
            x: 1,
            y: 0,
            x2: 0,
            y2: 0,
            type: 'linear',
            global: false
          },
          barBorderRadius: [5, 0, 0, 5]
        },
        emphasis: { show: false }
      },
      data: [
        '30210',
        '200232',
        '1200234',
        '900451',
        '400212',
        '28762',
        '6220',
        '5500',
        '3032',
        '10023'
      ]
    },
    {
      name: '女',
      type: 'bar',
      barGap: 20,
      barWidth: 25,
      xAxisIndex: 2,
      yAxisIndex: 2,
      label: {
        normal: {
          show: false,
          color: 'red',
          position: 'outside',
          textStyle: { fontSize: 14, color: '#fff', fontWeight: 'normal' }
        },
        emphasis: { show: false }
      },
      itemStyle: {
        normal: {
          color: {
            colorStops: [
              { offset: 0, color: '#59ffff' },
              { offset: 1, color: '#3BD6FF' }
            ],
            x: 1,
            y: 0,
            x2: 0,
            y2: 0,
            type: 'linear',
            global: false
          },
          barBorderRadius: [0, 5, 5, 0]
        },
        emphasis: { show: false }
      },
      data: [
        '30210',
        '200232',
        '1200234',
        '900451',
        '400212',
        '28762',
        '6220',
        '5500',
        '3032',
        '10023'
      ]
    }
  ],
  tooltip: {
    trigger: 'axis',
    show: true,
    textStyle: { fontSize: 14 },
    axisPointer: {
      type: 'shadow',
      shadowStyle: {
        color: {
          type: 'linear',
          x: 1,
          y: 0,
          x2: 0,
          y2: 0,
          colorStops: [
            { offset: 0, color: 'rgba(0, 138, 255, 0.5)' },
            { offset: 1, color: 'rgba(0, 251, 255, 0.5)' }
          ],
          globalCoord: false
        },
        opacity: 0.2
      }
    },
    formatter: (params) => {
			const { name, seriesName, marker, data } = params[0]
			// console.log('name, seriesName, marker, data----', name, seriesName, marker, data)
			const result = marker + seriesName +
			'（' + name + '）' +
			'：' + echarts.format.addCommas(data)
			return result
		}
  }
}
